<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <AppHeader />
    
    <main class="flex-grow container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-1 space-y-4">
        <ProjectList />
        <ScoreEditor />
      </div>
      
      <div class="lg:col-span-2">
        <StaffNotation :bars="scoreBars" :lyrics="lyrics" />
      </div>
    </main>
    
    <AppFooter />
    
    <FloatingKeyboard v-model="isKeyboardVisible" />
    <ExportModal v-model="isExportModalVisible" />
    <ImportModal v-model="isImportModalVisible" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import AppHeader from './components/AppHeader.vue';
import AppFooter from './components/AppFooter.vue';
import ProjectList from './components/ProjectList.vue';
import ScoreEditor from './components/ScoreEditor.vue';
import StaffNotation from './components/StaffNotation.vue';
import FloatingKeyboard from './components/FloatingKeyboard.vue';
import ExportModal from './components/ExportModal.vue';
import ImportModal from './components/ImportModal.vue';

import { useProjectStore } from './stores/projectStore';
import { useScoreStore } from './stores/scoreStore';

const projectStore = useProjectStore();
const scoreStore = useScoreStore();

const isKeyboardVisible = ref(true);
const isExportModalVisible = ref(false);
const isImportModalVisible = ref(false);

const scoreBars = computed(() => scoreStore.bars);
const lyrics = computed(() => scoreStore.lyrics);

// 加载项目列表
onMounted(() => {
  projectStore.loadProjects();
});

// 全局事件监听
onMounted(() => {
  document.addEventListener('input-note', (e) => {
    scoreStore.addNote(e.detail.note);
  });
  
  document.addEventListener('export-project', () => {
    isExportModalVisible.value = true;
  });
  
  document.addEventListener('import-project', () => {
    isImportModalVisible.value = true;
  });
});
</script>